<page-bar [title]="'密码修改'" [subTitle]="subTitleTpl">
  <ng-template #subTitleTpl>
    <button routerLink="/user/security" nz-button nzSize="small"><i nz-icon nzType="rollback"></i> 返回安全设置</button>
  </ng-template>
</page-bar>

<form nz-form [formGroup]="form" (ngSubmit)="save()" size="compact" class="max-width-xxl mb-lg">
  <nz-form-item>
    <nz-form-label nzFor="password">原密码</nz-form-label>
    <nz-form-control [nzErrorTip]="oldErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="lock">
        <input nz-input type="password" formControlName="password" />
      </nz-input-group>
      <ng-template #oldErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">请输入旧密码</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzFor="newpassword1">新密码</nz-form-label>
    <nz-form-control [nzErrorTip]="'请输入密码'">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="lock" nz-popover nzPopoverPlacement="right"
        nzPopoverTrigger="focus" [(nzVisible)]="visible" nzOverlayClassName="register-password-cdk"
        [nzOverlayStyle]="{ 'width.px': 240 }" [nzPopoverContent]="pwdCdkTpl">
        <input nz-input type="password" formControlName="newpassword1" />
      </nz-input-group>
      <ng-template #pwdCdkTpl>
        <div style="padding: 4px 0;">
          <ng-container [ngSwitch]="status">
            <div *ngSwitchCase="'ok'" class="success">强</div>
            <div *ngSwitchCase="'pass'" class="warning">中</div>
            <div *ngSwitchDefault class="error">弱</div>
          </ng-container>
          <div class="progress-{{ status }}">
            <nz-progress [nzPercent]="progress" [nzStatus]="passwordProgressMap[status]" [nzStrokeWidth]="6"
              [nzShowInfo]="false"></nz-progress>
          </div>
          <p class="mt-sm">请至少输入 6 个字符。请不要使用容易被猜到的密码。</p>
        </div>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzFor="newpassword2">确认密码</nz-form-label>
    <nz-form-control [nzErrorTip]="confirmErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="lock">
        <input nz-input type="password" formControlName="newpassword2" />
      </nz-input-group>
      <ng-template #confirmErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">请确认密码</ng-container>
        <ng-container *ngIf="i.errors?.equar">两次输入的密码不匹配!</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <button nz-button nzType="primary" nzSize="large" type="submit" class="submit">
      修改密码
    </button>
    <button nz-button nzType="default" nzSize="large" type="button" routerLink="/user/security">
      返回
    </button>
  </nz-form-item>
</form>
